<template>
  <div class="goods-detail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="fixed-top"
    />
    <div style="padding: 0 8px">
      <img :src="dityWeper.src" alt="">
      <h4 class="goods-title">{{dityDetail.title}}</h4>
      <p class="goods-price">
        <span class="market-price">{{dityDetail.market_price}}</span>
        <span class="sell-price">{{dityDetail.sell_price}}</span>
      </p>
      <div class="goods-info">
        <h4 class="goods-desc">商品参数</h4>
        <p>商品编号：{{dityDetail.goods_no}}</p>
        <p>库存：{{dityDetail.stock_quantity}}</p>
        <p>上架时间：{{dityDetail.add_time}}</p>
      </div>
      <van-button style="width: 100%;" type="primary" @click="jumpImg">图文介绍</van-button>
      <van-button style="width: 100%;" type="danger" @click="jumpComment">商品评论</van-button>
      <div class="goods-footer">
        <div class="goods-footer-item contact">
          <van-tabbar-item icon="service">联系客服</van-tabbar-item>
        </div>
        <div class="goods-footer-item cart">
          <van-tabbar-item icon="cart">购物车</van-tabbar-item>
          <span class="badge">4</span>
        </div>
        <div class="goods-footer-item add">
          <span>加入购物车</span>
        </div>
        <div class="goods-footer-item buy">
          <span>立即购买</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDityDetail, getWeper } from '@/api'
export default {
  data () {
    return {
      id: this.$route.params.id,
      dityDetail: {},
      dityWeper: {}
    }
  },
  created () {
    this.initDityDetail()
    this.initWeper()
  },
  methods: {
    initDityDetail () {
      getDityDetail(this.id).then(res => {
        console.log(res)
        this.dityDetail = res.data.message[0]
      })
    },
    initWeper () {
      getWeper(this.id)
        .then(res => {
          console.log(res)
          this.dityWeper = res.data.message[1]
        })
    },
    jumpComment () {
      this.$router.push({ name: 'ditycomment' })
    },
    jumpImg () {
      this.$router.push({ name: 'dityrecommend' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-detail {
    margin-bottom: 50px;
  }

  .swiperbox {
    height: 300px;

    img {
      width: 100%;
    }
  }

  .goods-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }

  .goods-price {
    font-size: 14px;

    .market-price {
      text-decoration: line-through;
    }

    .sell-price {
      color: #e4393c;
    }
  }

  .goods-info {
    font-size: 14px;

    .goods-desc {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .goods-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;

    .goods-footer-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .contact,
    .cart {
      width: 40%;
      font-size: 12px;
      position: relative;
    }

    .badge {
      position: absolute;
      top: 3%;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background-color: #e4393c;
      text-align: center;
      line-height: 14px;
      color: white;
    }

    .add,
    .buy {
      width: 60%;
      color: white;

      & > span {
        font-size: 14px;
      }
    }

    .add {
      background-color: #ff976a;
    }

    .buy {
      background-color: #ff4444;
    }
    .van-button {
    }
  }
</style>
